<template>
    <div>
        <el-card>
            <div slot="header">日志管理</div>
            <div>
                <el-table
                    :data="fileList"
                    style="width: 100%">
                    <el-table-column
                        type="selection"
                        align="center"
                        width="55">
                    </el-table-column>
                    <el-table-column
                        prop="createdAt"
                        label="创建时间"
                        align="center"
                        width="width">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="文件名称"
                        align="center"
                        width="width">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="操作"
                        align="center"
                        width="width">
                        <template slot-scope="scope">
                            <el-button type="text" @click="getFileInfo(scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>

        <el-dialog
            title="日志详情"
            :visible.sync="dialog"
            width="width">
            <div>
                <el-table
                    :data="fileInfo"
                    height="500px"
                    width="900px"
                    style="width: 100%">
                    <el-table-column
                        label="请求源地址"
                        width="width">
                        <template slot-scope="scope">
                            {{scope.row[0]}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="请求日期"
                        width="width">
                        <template slot-scope="scope">
                            {{scope.row[1]}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="请求方法"
                        width="width">
                        <template slot-scope="scope">
                            {{scope.row[2]}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="请求url"
                        width="width">
                        <template slot-scope="scope">
                            {{scope.row[3]}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="http版本"
                        width="width">
                        <template slot-scope="scope">
                            {{scope.row[4]}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="状态码"
                        width="width">
                        <template slot-scope="scope">
                            <span v-show="scope.row[5]!=250">{{scope.row[5]}}</span>
                            <span v-show="scope.row[5]==250||scope.row[5]==404" class="error">{{scope.row[5]}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="内容长度"
                        width="width">
                        <template slot-scope="scope">
                            {{scope.row[6]}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="请求者"
                        width="width">
                        <template slot-scope="scope">
                            {{scope.row[7]}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="请求客户端"
                        width="width">
                        <template slot-scope="scope">
                            {{scope.row[8]}}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div slot="footer">
                <el-button @click="dialog = false">取 消</el-button>
                <el-button type="primary" @click="dialog = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {getFileList,getFileInfo} from '@/api/log'
export default {
    name:'logManagement',
    data() {
        return {
            fileList:[],//文件列表
            dialog:false,
            fileInfo:[],//文件内容
        }
    },
    mounted(){
        //获取文件列表
        getFileList().then(res=>{
            this.fileList = res.data.info
            this.fileList.forEach(item=>{
                item.createdAt = this.$moment(item.createdAt).format('YYYY-MM-DD HH:mm')
            })
        })
    },
    methods:{
        getFileInfo(file){
            let loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            getFileInfo({
                fileName:file.name
            }).then(res=>{
                if(res==250){
                    this.$message({
                       type:'error',
                       showClose:true,
                       duration:1000,
                       message:'数据获取失败'
                    })
                    return
                }
                this.fileInfo = res.data.info
                var date = new Date(this.fileInfo[0][1])
                // this.fileInfo.forEach(item=>{
                //     console.log(item[1])
                //     // item[1] = this.$moment(item[1].trim()).format("YYYY-MM-DD HH:mm")
                // })
                for(let i=0;i<this.fileInfo.length-1;i++){
                    this.fileInfo[i][1] = this.$moment(this.fileInfo[i][1].trim()).format("YYYY-MM-DD HH:mm:ss")
                }
                this.dialog = true
                loading.close()
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.error{
    color: red;
}
</style>